<template>

  <div id="index">

    <el-form ref="form" :model="article1" label-width="80px">
      <el-form-item label="文章名称">
        <el-input v-model="article1.articleName"></el-input>
      </el-form-item>
      <el-form-item label="文章价格">
        <el-input v-model="article1.price"></el-input>
      </el-form-item>
      <el-form-item label="文章封面">

        <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8088/article/uploadPic"
          :on-success="upSuccess"
          :show-file-list="false"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <img v-if="imageUrl" :src="imageUrl" class="avatar">

      </el-form-item>

    </el-form>
    <div style="padding-left: 1200px">
      <el-button type="primary" @click="articleSubmit" class="carousel-arrow-right">提交</el-button>
    </div>
    <Editor v-model="article1.content"/>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    name: "articleAdd",
    data() {
      return {
        article1: {
          content: '',
        },
        imageUrl: ''

      };
    },
    methods:{
      articleSubmit(){

        axios.post('http://localhost:8088/article/insert',this.article1).then(res=>{

          if(res.data.code==0){
            this.$router.push("/article1");
          }
        })
      },
      upSuccess(res) {
        this.article1.pic=res;
        this.imageUrl = res;
      },

    },
    mounted() {
    }
  };
</script>



